<template>
  <view class="container">
    <scroll-view class="comment-list" scroll-y>
      <view class="comment-item" v-for="comment in comments.rows" :key="comment.id">
        <view class="user-info">
          <image class="avatar" :src="comment.prodAvatar"></image>
          <text class="username">{{ comment.userName}}<uni-icons type="star-filled" size="15" v-for="s in comment.rating " :key="s" style="color: orangered"/></text>
          <text class="time">{{ comment.createdAt}}</text>
        </view>

        <view class="comment-content">
          <text class="comment-text">{{ comment.comment}}</text>
        </view>
        <view class="comment-images">
          <image class="comment-image" :src="comment.images"/>
        </view>
        <view class="product-info">
          <text class="param">购买参数：{{ comment.prodParam}}</text>
            <text class="chat"><uni-icons type="chat" size="18" style="color:#3985ff"></uni-icons><text>2</text>回复</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>

import {comments} from '@/api/product/product'

export default {
  data() {
    return {
      comments: [],
      commentData: null
    };
  },
  created(){
    this.loadData();
  },
  methods:{
    async loadData(){
      this.comments = await comments();
      this.commentData = this.comments.rows[0];
    },

  }
};
</script>

<style>
.container {
  background-color: #f5f5f5;
  height: 100vh;
  padding-top: 40rpx;

}

.comment-list {
  padding: 20rpx;
}

.comment-item {
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.username {
  font-size: 28rpx;
  color: #333;
}

.time {
  font-size: 24rpx;
  color: #999;
  margin-left: 240rpx;
}

.comment-content {
  margin-top: 20rpx;
}

.comment-text {
  font-size: 28rpx;
  color: #666;
}

.comment-images {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;

}

.comment-image {
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  border: 2rpx solid lightskyblue;
}

.product-info {
  align-items: center;
}

.param {
  font-size: 24rpx;
  color: #999;
  margin-right: 20rpx;
}
.chat{
  margin-left: 540rpx;
  font-size: 30rpx;
  color: #3985ff;
}
</style>
